<template>
<div class="app-container">
  <!--  搜索区域 -->
  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
    <el-form-item label="入库单号">
      <el-input v-model="queryParams.inboundNo" placeholder="入库单号" />
    </el-form-item>
    <el-form-item label="审核状态">
      <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态">
        <el-option label="全部" value="" />
        <el-option label="待审核" value="PENDING" />
        <el-option label="已审核" value="APPROVED" />
        <el-option label="已拒绝" value="REJECTED" />
      </el-select>
    </el-form-item>
    <el-form-item label="发起人">
      <el-input v-model="queryParams.initiator" placeholder="发起人" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="reset" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <!--  查看窗口 -->
  <el-dialog
    title="查看入库单"
    :visible.sync="dialogVisible"
    width="80%"
  >
    <el-form :model="currentRow" ref="form" label-width="120px" class="detail-form">
      <el-form-item label="入库单号">
        <span class="detail-value">{{ currentRow.inboundNo }}</span>
      </el-form-item>
      <el-form-item label="审核状态">
        <span class="detail-value">{{ currentRow.auditStatus }}</span>
      </el-form-item>
      <el-form-item label="发起人">
        <span class="detail-value">{{ currentRow.initiator }}</span>
      </el-form-item>
      <el-form-item label="操作时间">
        <span class="detail-value">{{ parseTime(currentRow.createTime) }}</span>
      </el-form-item>
      <el-form-item label="审核人">
        <span class="detail-value">{{ currentRow.approver }}</span>
      </el-form-item>
      <el-form-item label="审核时间">
        <span class="detail-value">{{ parseTime(currentRow.approveTime) }}</span>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="productList">
      <el-table-column label="商品编号" align="center" prop="productId" />
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="商品分类" align="center" prop="categoryName" />
      <el-table-column label="商品品牌" align="center" prop="brandName" />
      <el-table-column label="入库数量" align="center" prop="quantity" />
      <el-table-column label="商品单位" align="center" prop="unitName" />
    </el-table>
    <div style="text-align: right; margin-top: 20px;">
      <el-button type="info" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
  <!-- 审核窗口 -->
  <el-dialog
    title="审核入库单据"
    :visible.sync="dialogVisible1"
    width="80%"
  >
    <el-form :model="currentRow" ref="form" label-width="120px" class="detail-form">
      <el-form-item label="入库单号">
        <span class="detail-value">{{ currentRow.inboundNo }}</span>
      </el-form-item>
      <el-form-item label="发起人">
        <span class="detail-value">{{ currentRow.initiator }}</span>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="productList">
      <el-table-column label="商品编号" align="center" prop="productId" />
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="商品分类" align="center" prop="categoryName" />
      <el-table-column label="商品品牌" align="center" prop="brandName" />
      <el-table-column label="入库数量" align="center" prop="quantity" />
      <el-table-column label="商品单位" align="center" prop="unitName" />
    </el-table>
    <div style="text-align: right; margin-top: 20px;">
      <el-button type="primary" @click="auditSuccess">审核通过</el-button>
      <el-button type="danger" @click="falseAudit">审核拒绝</el-button>
      <el-button type="info" @click="dialogVisible1 = false">关闭</el-button>
    </div>
  </el-dialog>
  <!--  审核拒绝窗口 -->
  <el-dialog
    title="审核拒绝"
    :visible.sync="dialogVisible2"
    width="40%"
  >
    <el-form :model="form" ref="form" label-width="120px" class="detail-form">
      <el-form-item label="拒绝原因">
        <el-input
          type="textarea"
          v-model="form.rejectReason"
          :rows="4"
          placeholder="请输入拒绝原因"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: right; margin-top: 20px;">
      <el-button type="primary" @click="rejectedAudit">确认拒绝</el-button>
      <el-button type="info" @click="dialogVisible2 = false">关闭</el-button>
    </div>
  </el-dialog>
  <!-- 入库单列表 -->
  <el-table v-loading="loading" :data="auditList">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="入库单号" align="center" prop="inboundNo" />
    <el-table-column label="仓库编号" align="center" prop="warehouseId" />
    <el-table-column label="仓库名称" align="center" prop="warehouseName" />
    <el-table-column label="商品种类数" align="center" prop="productCount" />
    <el-table-column label="业务类型" align="center" prop="businessType" />
    <el-table-column label="审核状态" align="center" prop="auditStatus">
      <template slot-scope="scope">
        <el-tag :type="scope.row.auditStatus === 'REJECTED' ? 'danger' :
                  scope.row.auditStatus === 'PENDING' ? 'warning' : 'success'">
          {{ scope.row.auditStatus === 'PENDING' ? '待审核' :
          scope.row.auditStatus === 'APPROVED' ? '已审核' :
            scope.row.auditStatus === 'REJECTED' ? '已拒绝' : '' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="发起人" align="center" prop="initiator" />
    <el-table-column label="发起时间" align="center" prop="createTime" width="180">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="审核人" align="center" prop="approver" />
    <el-table-column label="审核时间" align="center" prop="approveTime" width="180">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.approveTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleSee(scope.row)"
        >查看</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleAudit(scope.row)"
          v-if="scope.row.auditStatus === 'PENDING'"
        >审核</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
</div>
</template>

<script>
import {parseTime} from "../../../utils/ruoyi";
import {getInboundList, getListInboundProduct, updateAudit} from "@/api/audit/inbound";

export default {
  name: "Inbound",
  created() {
    this.getList()
  },
  data() {
    return {
      // 拒绝原因
      form: {
        rejectReason: '',
      },
      // 审核窗口是否显示
      dialogVisible1: false,
      // 审核拒绝窗口是否显示
      dialogVisible2: false,
      //这是多表联查出的要审核的产品信息，还未查出
      productList: [],
      // 入库单列表
      auditList: [],
      //loading是表格加载状态
      loading: false,
      //总记录数
      total: 0,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inboundNo: '',
        auditStatus: '',
        initiator: '',
      },
      //当前行数据
      currentRow: {},
      // 查看窗口是否显示
      dialogVisible: false,
    }
  },
  methods: {
    //确认拒绝审核通过
    rejectedAudit() {
      this.currentRow.auditStatus = 'REJECTED'
      this.currentRow.approveTime = new Date()
      console.log(this.currentRow)
      updateAudit(this.currentRow)
      this.$message.error("成功拒绝此次入库")
      this.dialogVisible1=false
      this.dialogVisible2=false
      this.getList()
    },
    // 审核通过
    auditSuccess() {
      this.currentRow.auditStatus = 'APPROVED'
      this.currentRow.approveTime = new Date()
      console.log(this.currentRow)
      updateAudit(this.currentRow)
      this.$message.success("入库审核已通过")
      this.dialogVisible1=false
      this.getList()
    },
    // 审核拒绝
    falseAudit() {
      this.dialogVisible2 = true
    },
    // 审核
    handleAudit(row) {
      this.currentRow = row
      this.getListProduct()
      this.dialogVisible1 = true
    },
    parseTime,
    //查询入库单列表
    getList() {
      this.loading = true
      console.log("开始查询中")
      getInboundList(this.queryParams).then(res => {
        this.loading = false
        this.auditList = res.rows
        this.total = res.total
      })
    },
    //查询入库单详情
    getListProduct() {
      this.loading = true
      console.log("开始查询中")
      getListInboundProduct(this.currentRow.inboundNo).then(res => {
        this.loading = false
        this.productList = res.rows
      })
    },
    // 重置查询条件
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        inboundNo: '',
        auditStatus: '',
        initiator: '',
      }
      this.getList()
    },
    // 查看详情按钮
    handleSee(row) {
      this.currentRow = row
      this.getListProduct()
      this.dialogVisible = true
    },
  }
}
</script>

<style scoped lang="scss">

</style>
